import React, { PureComponent, Component } from 'react'

// import './style.css'
import style from './style.module.scss'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

const mapStateToProps = (store, props) => {
    return {
        myName: store.name,
        menu: store.menu,
        activeMenu: store.activeMenu,
        list: store.list
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        setName() {
            // 修改store里面name的值
            // console.log('store')
            dispatch({
                type: 'SET_NAME',
                value: 123
            })
        },
        setMenu(menu) {
            dispatch({
                type: 'SET_MENU',
                value: menu
            })
        },
        activeFood(food) {
            dispatch({
                type: 'SET_FOOD',
                value:food
            })
        }
    }
}

// [
//     {
//         name: '白菜',
//     },
//     {
//         name:'小油菜'
//     }
// ]
// [
//     <span>白菜<button>关闭</button></span>,
//     <span>小油菜<button>关闭</button></span>,

// ]

class Alert extends PureComponent {
    render() {
        return (
            <div className={style.alertBox}>
                <button onClick={() => this.props.history.push('/result')}>去测评</button>
                {
                    this.props.list.filter(item => item.isSelected == 1).map((item, key) => <span key={key}>{item.name}
                        <button onClick={() => this.props.activeFood(item)}>×</button>
                    </span>)
                }
            </div>
        )
    }
}
Alert = withRouter(Alert)
Alert = connect(mapStateToProps, mapDispatchToProps)(Alert)

class Index extends PureComponent {
    constructor(props) {
        super(props)
    }
    activeFood(food) {
        // let list = this.state.list
        // for(let i = 0; i< list.length; i++) {
        //     if(list[i].name === food.name) {
        //         if(list[i].isSelected) {
        //             list[i].isSelected = 0
        //         } else {
        //             list[i].isSelected = 1
        //         }
                
        //     }
        // }
        // this.setState({
        //     list
        // }, () => {
        //     this.forceUpdate()
        // })
    }
    render() {
        return (
            <div className={style.box}>
                <div className={style.left}>
                    {
                        this.props.menu.map((item, key) => <div key={key} 
                        onClick={() => this.props.setMenu(item)}
                        className={[style.item, this.props.activeMenu === item ? style.active : ''].join(" ")}>{item}</div>)
                    }
                </div>
                <div className={style.right}>
                    {
                        this.props.list.filter(item=> {
                            if(this.props.activeMenu === '主食') {
                                return item.category_id === '1'
                            } else if(this.props.activeMenu === '蛋奶豆制品') {
                                return item.category_id === '2'
                            } else if(this.props.activeMenu === '蔬菜类') {
                                return item.category_id === '3'
                            }
                        }).map((item,key) => <div
                        onClick={() => this.props.activeFood(item)}
                        className={[style.item, item.isSelected === 1 ? style.active : ''].join(" ")} key={key}>
                            <img src={item.imgUrl}></img>
                            <span>{item.name}</span>
                        </div>)
                    }
                </div>
                {
                    this.props.list.filter(item => item.isSelected === 1).length > 0 ? <Alert></Alert> : null
                }
            </div>
        )
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Index)
